<!-- 顶部跑马灯 -->
<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div v-for='(item, index) in imgs' :key='index' class="swiper-slide">
          <img class="img" v-lazy="item.imgUrl">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>

  </div>
</template>

<script>

export default {
  data () {
    return {
      imgs: [
        {
          name: 'swiperSlide2',
          imgUrl: 'http://qiniucdn.iwiteks.com/banner_yh.png'
        },
        {
          name: 'swiperSlide3',
          imgUrl: 'http://qiniucdn.iwiteks.com/banner_teh.png'
        },
        {
          name: 'swiperSlide8',
          imgUrl: 'http://qiniucdn.iwiteks.com/chibsz.png'
        },
        {
          name: 'swiperSlide4',
          imgUrl: 'http://qiniucdn.iwiteks.com/xishui-web4.png'
        },
        {
          name: 'swiperSlide5',
          imgUrl: 'http://qiniucdn.iwiteks.com/xishui-web6.png'
        },
        {
          name: 'swiperSlide6',
          imgUrl: 'http://qiniucdn.iwiteks.com/xishui-web9.png'
        },
        {
          name: 'swiperSlide7',
          imgUrl: 'http://qiniucdn.iwiteks.com/banner_cbsz.png'
        }
      ]
    }
  },
  components: {},
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.init()
  },
  methods: {
    init () {
      /* eslint-disable no-new */
      new Swiper('.swiper-container', {
        speed: 1600,
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        // autoplay: true,
        loop: true, // 循环模式选项
        effect: 'fade',
        fadeEffect: 'true',
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
      /* eslint-enable no-new */
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.swiper-container {
  .swiper-slide {
    height 600px
    // overflow hidden
  }
  img {
    width 100%
    height 600px
  }
}

.swiper-button-prev, .swiper-button-next {
  outline: none
}
</style>
